<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>04_class与style绑定</title>
    <style>
      .red {
        color: red;
      }
      .green {
        color: greenyellow;
      }
    </style>
  </head>
  <body>
    <!--
      1. 理解
        在应用界面中, 某个(些)元素的样式是变化的
        class/style绑定就是专门用来实现动态样式效果的技术
      2. class绑定: :class='xxx'
        xxx是字符串
        xxx是对象
        xxx是数组
      3. style绑定
        :style="{ color: activeColor, fontSize: fontSize + 'px' }"
        其中activeColor/fontSize是data属性
      -->

    <div id="app">
      <h2>1. class绑定: :class='xxx'</h2>
      <p class="red aaa bbb">这是一段文字~</p>
      <p :class="isRed ? 'red' : 'green'">这是一段文字~</p>
      <p
        :class="{
          red: isRed,
          green: !isRed,
          aaa: true
        }"
      >
        这是一段文字~
      </p>
      <p :class="['red', color, 'bbb']">这是一段文字~</p>
      <button @click="changeColor">改变颜色</button>

      <h2>2. style绑定</h2>
      <p style="font-size: 30px; color: red">这是一段文字~</p>
      <p
        :style="{
          fontSize: '30px',
          color: 'green'
        }"
      >
        这是一段文字~
      </p>
      <input type="text" placeholder="请输入字体大小" />
    </div>

    <script src="../js/vue.js"></script>
    <script>
      /*
        如果样式可以写死（一上来可以确定）：
          用来class直接写死
        如果样式是动态的（会发生变化）
          如果样式是有限的几种，用class
          如果样式变化是无限的，用style
      */
      new Vue({
        el: "#app",
        data: {
          isRed: true,
          color: "ccc",
        },
        methods: {
          changeColor() {
            this.isRed = !this.isRed;
          },
        },
      });
    </script>
  </body>
</html>
